<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<form action="" id="reg" method="get"></form>
		用户名<input type="text" name="username" form="reg"/>
		
		年龄<input type="number" min="18" max="40" step="1" id="age" name="age" form="reg">
		<span id="ageError"></span>
		<p>
			<!--直接在表单的属性pattern里面可以写正则表达式-->
			手机号：<input type="tel" pattern="^1[3578]\d{10}$" id="phone" name="phone" form="reg"/>
		</p>
		密码<input type="password" name="pas" form="reg" />
		<input type="submit"  value="注册" form="reg" />
		
	</body>
	<script type="text/javascript">
		var age = document.querySelector("#age");
		var ageError = document.querySelector("#ageError");
		var phone = document.querySelector("#phone");
		age.addEventListener("invalid",function(e){
//			阻止默认行为
			e.preventDefault();
			ageError.innerText = "年龄只在18-40之间"
			console.log(1)
			
		})
		phone.addEventListener("invalid",function(e){
			e.preventDefault();
			alert("请输入正确的手机号");
			phone.value = "";
		})
	</script>
</html>
